/**
 * 轮播图组件
 * Created by wubin on 2016-12-04.
 */
import {
    Component, Input, Renderer, ElementRef, trigger, state, style, transition,
    animate, AnimationTransitionEvent, HostListener,
    OnChanges, ChangeDetectorRef, OnDestroy
} from "@angular/core";
@Component({
    selector: "carousel-img",
    templateUrl: "./carousel-img.component.html",
    styleUrls: ["./style-source/carousel-img.component.scss"],
    animations: [
        trigger("moreImgState", [
            state("hide", style({
                opacity: 0
            })),
            state("show", style({
                opacity: 1
            })),
            transition("hide => show", animate("100ms ease-in")),
            transition("show => hide", animate("100ms ease-out"))
        ]),
    ]
})
export class CarouselImgComponent implements OnChanges, OnDestroy{
    //该输入用于接受要创建的Img的src
    @Input() imgSource: string[] = [];
    @Input() width: string = "";
    @Input() height: string = "";

    //该变量用于记录当期显示的下标
    private currIndex: number = 0;
    //该变量用于记录changeIngState函数设置的setTimeout的返回值
    private changeImgStateFnLabel: any;
    //这个数组用于存储对应的图像的当前状态
    imgSourceState: string[] = [];
    //该变量用于标记当前是否可停止动画
    canStop: boolean = true;


    constructor(private cdRef: ChangeDetectorRef) {
    }

    ngOnChanges() {
        if (this.imgSource.length > 0) {
            this.initSourceState();
            this.changeImgStateFnLabel = setTimeout(() => this.changeImgState(), 2000);
        }
    }

    ngOnDestroy(){
        if(this.canStop){
            this.clearChangeImgTimeout();
        }
    }

    private initSourceState() {
        for (let i = 0, length = this.imgSource.length; i < length; i++) {
            this.imgSourceState[i] = "hide";
        }

        this.imgSourceState[this.currIndex] = "show";
    }

    animationDone(event: AnimationTransitionEvent) {
        if (event.fromState === "hide" && event.toState === "show") {
            this.canStop = true;
            this.changeImgStateFnLabel = setTimeout(() => this.changeImgState(), 2000);
        }
    }

    private changeImgState() {
        this.canStop = false;
        this.imgSourceState[this.currIndex++] = "hide";
        this.currIndex = this.currIndex === this.imgSourceState.length ? 0 : this.currIndex;
        this.imgSourceState[this.currIndex] = "show";
        this.cdRef.detectChanges();
    }

    @HostListener("mouseenter") OnMouseEnter() {
        if (this.canStop) {
            this.clearChangeImgTimeout();
        }
    }

    @HostListener("mouseleave") OnMouseLeave() {
        if (this.canStop) {
            this.changeImgStateFnLabel = setTimeout(() => this.changeImgState(), 2000);
        }
    }

    @HostListener("mousemove") OnMouseMove() {
        if (this.canStop && this.changeImgStateFnLabel) {
            this.clearChangeImgTimeout();
        }
    }

    private clearChangeImgTimeout(){
        clearTimeout(this.changeImgStateFnLabel);
        this.changeImgStateFnLabel = 0;
    }
}